.b-card {
  box-shadow: 0 0 8px 0 #f0f0f0 !important;
  border-radius: 4px;
  border: 1px solid #f0f0f0;
  margin-bottom: 8px;
  background-color: #fff;
  color: #303133;
  padding: 0 16px;
  height: 190px;
  transition: all 200ms;

  &-selection {
    &--selected {
      background-color: #efefef;
    }
    &--disabled {
      cursor: not-allowed;
    }
  }


  &-top {
    height: 108px;
    padding: 16px 0;
    box-shadow: inset 0px -1px 0px 0px #f0f0f0;

    &__top {
      height: 26px;

      &-img {
        width: 24px;
        height: 24px;
        margin-right: 16px;
      }

      &-line {
        width: 4px;
        height: 14px;
        border-radius: 1px;
        margin-right: 8px;
      }

      &__hover {
        font-size: 14px;
        font-weight: 600;
        max-width: 0;
        transition: max-width 200ms ease-out;

        &--status {
          margin-right: 8px;
          transform: translateX(-100%);
          transition: transform 200ms ease-in-out;
        }
      }

      &-menu {
        margin-left: auto;
      }

      &-name {
        font-size: 18px;
        color: #404040;
        font-weight: 600;
        margin-right: 8px;
      }

      &-favorites {
        width: 20px;
        height: 20px;
        margin-right: 5px;
        cursor: pointer;
      }
    }

    &__center {
      height: 16px;

      &-desc {
        font-size: 14px;
        color: #7f7f7f;
        max-width: 800px;
      }
    }

    &__bottom {
      &--type {
        display: inline-flex;
        border-radius: 3px;
        padding: 0px 16px;
        height: 24px;
      }

      &-integration {
        margin-left: auto;
      }
    }
  }

  &-bottom {
    padding: 16px 0;
  }

  &:hover {
    .b-card-top__top__hover {
      max-width: 100%;
    }

    .b-card-top__top__hover--status {
      transform: translateX(0);
    }
  }
}